<template>
	<view style="background-color: #F1F1F1;">
		<view  class="product-title">
			<swiper class="items" :autoplay="true" :indicator-dots="true">
				<swiper-item class="item">
					<image class="img" :src="detail.img_url" ></image>
				</swiper-item>
				<!-- <swiper-item class="item">
					<image class="img" src="http://bykrhwebset.oss-cn-hangzhou.aliyuncs.com/static/img/product2.jpg" ></image>
				</swiper-item> -->
			</swiper>
			<view class="title">
				<view class="name">{{detail.name}}</view>
				<view class="money">
					<text>¥&nbsp;{{detail.unit_price}}</text>
				</view>
				<!-- <view class="line"></view> -->
				<!-- <view class="introduce">这是普通的烧结砖</view> -->
			</view>
		</view>
		<view class="product-specifications">
			<view class="specs">产品规格</view>
			<view class="content">
				<view style="margin: 30upx 0 40upx;">
					<text>单位：</text>
					<text class="unit">{{detail.unit}}</text>
				</view>
				<text>购买数量：</text>
				<view class="num">
					<uni-number-box :min="1" :max="50000" :value="number" @change="changeNumber"></uni-number-box>
				</view>
			</view>
		</view>
		<!-- <view class="product-details">
			<view class="specs">产品详情</view>
			<view>
				<image class="img" src="http://bykrhwebset.oss-cn-hangzhou.aliyuncs.com/static/img/product1.jpg" ></image>
				<image class="img" src="http://bykrhwebset.oss-cn-hangzhou.aliyuncs.com/static/img/product1.jpg" ></image>
				<image class="img" src="http://bykrhwebset.oss-cn-hangzhou.aliyuncs.com/static/img/product1.jpg" ></image>
				<image class="img" src="http://bykrhwebset.oss-cn-hangzhou.aliyuncs.com/static/img/product1.jpg" ></image>
			</view>
		</view> -->
		<view class="buy">
			<!-- <view class="customer">
				<button open-type="contact" style="margin: 0;">
					<image class="img" src="../../../static/img/serve-a.png" mode="widthFix"></image>
				</button>
			</view>
			<view class="shop">
				<image class="img" src="../../../static/img/zeb.png"></image>
			</view> -->
			<view class="join">
				<button open-type="contact" class="btn" style="margin: 0;width: 100%;height: 80upx;outline: none;border:0;">立即咨询</button>
			</view>
			<view class="now" @tap="goBuy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default {
		components: {uniNumberBox},
		data() {
			return {
				wh: '',
				uid: '',
				detail: {},
				number: 1,
				totalPrice: 0
			};
		},
		onLoad(options) {
			uni.getSystemInfo({
				success: (res)=> {
					this.wh = res.windowHeight;
				}
			})
			this.uid = options.id;
			this.getDetail()
		},
		methods:{
			getDetail(){
				let self = this;
				uni.showLoading({title: '加载中',mask: true,duration: 5000});
				this.config.post('/api/product/findById', {
					id: this.uid,
				}).then(res=>{
					uni.hideLoading();
					if(res.data.code==='0'){
						self.detail = res.data.product;
					}else{
						uni.showToast({title: self.config.handleError(res.data),icon: 'none'});
					}
				})
			},
			// 数量改变
			changeNumber(num){
				this.number = num;
			},
			goBuy(){
				if(!this.config.globalData.user.user_nick){
					this.config.getLoginInfo();
					return;
				}
				if(this.number<1) return;
				uni.navigateTo({
					url: '/pages/main/confirm-order/confirm-order?detail='+JSON.stringify(this.detail)+'&number='+this.number,
				})
			}
		},
	}
</script>

<style lang="less">
	.product-title{
		width: 100%;
		background-color: #fff;
		text-align: center;
		.items{
			width: 100%;
			height: 300upx;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			text-align: left;
			margin-left: 30upx;
			margin-right: 30upx;
			margin-top: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				font-size: 30upx;
				font-weight: 900;
			}
			.money{
				display: flex;
				margin-top: 15upx;
				font-size: 30upx;
				padding-bottom: 15upx;
			}
			.line{
				margin-top: 15upx;
				border-bottom: 1px solid #ccc;
			}
			.introduce{
				margin-top: 15upx;
				font-size: 25upx;
				color: #808080;
				padding-bottom: 15upx;
			}
		}
	}
	.product-specifications{
		width: 100%;
		background-color: #fff;
		text-align: center;
		margin-top: 20upx;
		.specs{
			width: 100%;
			height: 60upx;
			text-align: left;
			font-size: 25upx;
			padding: 10upx 0 10upx 20upx;
			display: flex;
			align-items: center;
			border-left: 5px solid #007aff;
			border-bottom: 1px solid #ccc;
		}
		.content{
			padding-left: 30upx;
			padding-top: 20upx;
			padding-bottom: 15upx;
			text-align: left;
			font-size: 25upx;
			.unit{
				width: 100upx;
				height: 60upx;
				margin-top: 10upx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 8upx;
				background-color: #007aff;
			}
			.num{
				width: 100upx;
				height: 60upx;
				margin-top: 10upx;
			}
		}
	}
	.product-details{
		width: 100%;
		background-color: #fff;
		text-align: center;
		margin-top: 10upx;
		padding-bottom: 100upx;
		.specs{
			width: 100%;
			height: 60upx;
			text-align: left;
			font-size: 25upx;
			padding-left: 15upx;
			margin-bottom: 15upx;
			display: flex;
			align-items: center;
			border-left: 5px solid #007aff;
			border-bottom: 1px solid #ccc;
		}
	}
	.buy{
		width: 100%;
		height: 80upx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position:fixed;
		bottom: 0;
		border-top: 5px solid #F1F1F1;
		background-color: #fff;
		.customer{
			width: 15%;
			height: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.img{
				width: 40upx;
				height: 18upx;
			}
		}
		.shop{
			width: 15%;
			height: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			.img{
				width: 30upx;
				height: 30upx;
			}
		}
		.join{
			width: 50%;
			height: 100%;
			// background-color: #f4a113;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			.btn{
				margin: 0;
				width: 100%;
				height: 80upx;
				border: none;
				border-radius:0;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			button::after{
				border: none;
				border-radius:0;
			}
		}
		.now{
			width: 50%;
			height: 100%;
			background-color: #007aff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
	}
</style>
